<template>
  <div class="login">
    <back-btn></back-btn>
    <div class="login-top">
      <img src="../../assets/image/login/default_head.png"
           alt="">
    </div>
    <div class="login-bottom">
      <van-form @submit="onSubmit">
        <van-field v-model="mobile"
                   :left-icon="require('../../assets/image/login/login_user.png')"
                   placeholder="请输入手机号码"
                   :rules="[{ required: true, message: '请填写手机号码' }]" />
        <van-field v-model="code"
                   :left-icon="require('../../assets/image/login/login_yzm.png')"
                   placeholder="请输入验证码"
                   :rules="[{ required: true, message: '请填写验证码' }]">
          <template #button>
            <li class="code-btn"
                v-if="!isGetCode"
                @click="getCode">获取验证码</li>
            <van-count-down v-if="isGetCode"
                            :time="time"
                            format="ss秒"
                            @finish="isGetCode = false" />
          </template>
        </van-field>
        <van-field v-model="password"
                   type="password"
                   :left-icon="require('../../assets/image/login/login_pwd.png')"
                   placeholder="请输入密码"
                   :rules="[{ required: true, message: '请输入密码' }]" />
        <li class="reset-pwd"
            @click="goResetPassword">忘记密码？</li>
        <div class="submit-div">
          <van-button round
                      block
                      native-type="submit">登 录</van-button>
        </div>
        <li class="rigister-btn">
          <span style="color:#999999">还没注册？</span>
          <span style="color:#FE6228"
                @click="goRegister">去注册</span>
        </li>
      </van-form>
    </div>
  </div>
</template>

<script>
import BackBtn from '@/components/BackBtn'
export default {
  data () {
    return {
      mobile: '',
      code: '',
      password: '',
      isGetCode: false, // 是否获取验证码
      time: 0
    };
  },
  components: {
    BackBtn,
  },
  created () { },
  methods: {
    getCode () {
      if (!this.mobile) {
        this.$toast('请输入手机号码！')
        return
      }
      this.isGetCode = true;
      this.time = 10 * 1000
    },
    goResetPassword () {
      this.$router.push({ path: '/resetPwd' })
    },
    goRegister () {
      this.$router.push({ path: '/register' })
    },
    onSubmit () { },
  }
}

</script>
<style lang='scss' scoped>
.login {
  height: 100%;
  width: 100%;
}
.login-top {
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  @include bgImgCover('../../assets/image/login/login_beijing.png');
  img {
    width: 1.62rem;
    height: 1.62rem;
  }
}
.login-bottom {
  height: 60%;
  width: 100%;
  box-sizing: border-box;
  padding: 20% 0.85rem;
  ::v-deep .van-field__left-icon {
    width: 0.8rem;
    text-align: center;
  }
  ::v-deep .van-icon__image {
    width: 0.37rem;
    height: 0.31rem;
    margin-left: 0.2rem;
  }
  .van-cell {
    align-items: center;
  }
  .code-btn {
    width: 1.3rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #ff6128, #ff8331);
    border-radius: 0.15rem;
    font-size: 0.18rem;
  }
  .reset-pwd {
    margin-top: 0.2rem;
    color: #999999;
    font-size: 0.26rem;
    float: right;
  }
  .submit-div {
    margin-top: 1rem;
    width: 100%;
    .van-button {
      background: linear-gradient(to right, #ff6128, #ff8331);
      color: #ffffff;
      font-size: 0.36rem;
      height: 0.9rem;
    }
  }
  .rigister-btn {
    margin-top: 0.3rem;
    width: 100%;
    text-align: center;
    font-size: 0.26rem;
  }
}
</style>